<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel>
      <el-carousel-item v-for="item in bannerArr">
        <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
    <!-- 食谱相关开始 -->
    <el-row :gutter="10">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" @select="handleRecipe" default-active="1" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in recipeCategoryArr" :index="c.id">{{ c.name }}</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in recipeArr">
        <el-card>
          <router-link :to="'/detail?id='+item.id" style="color: #333;text-decoration: none">
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height: 150px">
            <p style="height: 40px">{{ item.title }}</p>
          </router-link>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="10" style="font-size: 20px;line-height: 40px">{{ item.nickname }}</el-col>
            <el-col :span="10" style="line-height: 40px">{{ item.categoryName }}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="router.push('/list?type=1')">点击加载更多</el-button>
    </div>
    <!-- 食谱相关结束 -->
    <!-- 视频相关开始 -->
    <el-row :gutter="10">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" @select="handleVideo" default-active="1" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in videoCategoryArr" :index="c.id">{{ c.name }}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in videoArr">
        <el-card>
          <router-link :to="'/detail?id='+item.id" style="color: #333;text-decoration: none">
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height: 150px">
            <p style="height: 40px">{{ item.title }}</p>
          </router-link>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="10" style="font-size: 20px;line-height: 40px">{{ item.nickname }}</el-col>
            <el-col :span="10" style="line-height: 40px">{{ item.categoryName }}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="router.push('/list?type=2')">点击加载更多</el-button>
    </div>
    <!-- 视频相关结束 -->
    <!-- 资讯相关开始 -->
    <el-row :gutter="10">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" @select="handleInfo" default-active="1" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in infoCategoryArr" :index="c.id">{{ c.name }}</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in infoArr">
        <el-card>
          <router-link :to="'/detail?id='+item.id" style="color: #333;text-decoration: none">
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height: 150px">
            <p style="height: 40px">{{ item.title }}</p>
          </router-link>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="10" style="font-size: 20px;line-height: 40px">{{ item.nickname }}</el-col>
            <el-col :span="10" style="line-height: 40px">{{ item.categoryName }}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button @click="router.push('/list?type=3')">点击加载更多</el-button>
    </div>
    <!-- 资讯相关结束 -->
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";

const handleRecipe = (index,indexPath)=>{//index代表二级分类的id
  loadContents(1,index);
}
const handleVideo = (index,indexPath)=>{//index代表二级分类的id
  loadContents(2,index);
}
const handleInfo = (index,indexPath)=>{//index代表二级分类的id
  loadContents(3,index);
}
const recipeCategoryArr = ref([]);
const videoCategoryArr = ref([]);
const infoCategoryArr = ref([]);
const recipeArr = ref([]);
const videoArr = ref([]);
const infoArr = ref([]);
const bannerArr = ref([]);
onMounted(() => {
  //请求轮播图数据
  axios.get('http://localhost:8080/v1/banners/index').then((response)=>{
    if (response.data.code==2001){
      bannerArr.value = response.data.data;
    }
  })
  //请求三个类型下的二级分类数据
  axios.get('http://localhost:8080/v1/categories/1/sub').then((response) => {
    if (response.data.code == 2001) {
      recipeCategoryArr.value = response.data.data;
    }
  })
  axios.get('http://localhost:8080/v1/categories/2/sub').then((response) => {
    if (response.data.code == 2001) {
      videoCategoryArr.value = response.data.data;
    }
  })
  axios.get('http://localhost:8080/v1/categories/3/sub').then((response) => {
    if (response.data.code == 2001) {
      infoCategoryArr.value = response.data.data;
    }
  })
  //请求三个类型下的内容列表
  loadContents(1,0);
  loadContents(2,0);
  loadContents(3,0);
})
const loadContents = (type,categoryId)=>{
  axios.get('http://localhost:8080/v1/contents/'+type+'/'+categoryId+'/index').then((response) => {
    if (response.data.code == 2001) {
      switch (type) {
        case 1:recipeArr.value = response.data.data;break;
        case 2:videoArr.value = response.data.data;break;
        case 3:infoArr.value = response.data.data;break;
      }
    }
  })
}
</script>

<style scoped>

</style>